<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目</title>
    <!-- 引入导航小图标 -->
    <link rel="shortcut icon" href="./favicon.ico" />
    <!-- 引入公共样式 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入页面样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- 引入jQuery -->
    <script src="./js/jquery.3.6.0.min.js"></script>
    <!-- 引入页面js -->
    <script src="./js/index.js"></script>
    <!-- 引入echarts.js -->
    <script src="./js/echarts.min.js"></script>
    <!-- 引入中国地图 -->
    <script src="./js/china.js"></script>
</head>
<body>
    <div class="container">
        <!-- 第一列 -->
        <div class="column">
            <!-- 1.1数据概况 -->
            <div class="panel overview">
                <div class="inner">
                    <div class="item">
                        <p>2,190</p>
                        <span><i class="icon-dot"></i>设备总数</span>
                    </div>
                    <div class="item">
                        <p>190</p>
                        <span><i class="icon-dot"></i>季度新增</span>
                    </div>
                    <div class="item">
                        <p>3001</p>
                        <span><i class="icon-dot"></i>运营设备</span>
                    </div>
                    <div class="item">
                        <p>108</p>
                        <span><i class="icon-dot"></i>异常设备</span>
                    </div>
                </div>
            </div>

            <!-- 1.2故障/异常设备监控 -->
            <div class="panel monitor">
                <div class="inner">
                    <!-- 页签部分 -->
                    <div class="tabs">
                        <a class="active" href="javascript:;">故障设备监控</a>
                        <a href="javascript:;">异常设备监控</a>
                    </div>
                    <!-- 页面部分1 -->
                    <div class="content">
                        <div class="head">
                            <span>异常事件</span>
                            <span>异常地址</span>
                            <span>异常代码</span>
                        </div>
                        <!-- 页面轮播图部分 -->
                        <div class="carousel">
                            <ul>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011231</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011232</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011233</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011234</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011235</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011236</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011237</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011238</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011239</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112310</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112311</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112312</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112313</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112314</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112315</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011231</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011232</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011233</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011234</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011235</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011236</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011237</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011238</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>22011239</span></li>
                                <li><span>20220114</span><span>长沙民政职业技术学院</span><span>220112310</span></li>
                            </ul>
                        </div>
                    </div>
                    <!-- 页面部分2 -->
                    <div class="content" style="display: none;">
                        <div class="head">
                            <span>异常事件</span>
                            <span>异常地址</span>
                            <span>异常代码</span>
                        </div>
                        <!-- 页面轮播图部分 -->
                        <div class="carousel">
                            <ul>
                                <li><span>20220114</span><span>软件学院</span><span>22011231</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011232</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011233</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011234</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011235</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011236</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011237</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011238</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011239</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112310</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112311</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112312</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112313</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112314</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112315</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011231</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011232</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011233</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011234</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011235</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011236</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011237</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011238</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>22011239</span></li>
                                <li><span>20220114</span><span>软件学院</span><span>220112310</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 1.3点位分布统计 -->
            <div class="panel point">
                <div class="inner">
                    <h3>点位分布统计</h3>
                    <div class="echarts">
                        <div class="pie"></div>
                        <div class="data">
                            <div class="item">
                                <p>320,11</p>
                                <span><i class="icon-dot" style="color: tomato;"></i>点位分布</span>
                            </div>
                            <div class="item">
                                <p>418</p>
                                <span><i class="icon-dot" style="color: greenyellow;"></i>本月新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第二列 -->
        <div class="column">
            <!-- 2.1设备数据统计 -->
            <div class="map">
                <h2><span class="icon-cube"></span>设备数据统计</h2>
                <div class=echarts>
                    <div class="geo"></div>
                </div>
            </div>
            <!-- 2.2全国用户总量统计 -->
            <div class="panel user">
                <div class="inner">
                    <h3>全国用户总量统计</h3>
                    <div class="echarts">
                        <div class="bar"></div>
                        <div class="data">
                            <div class="item">
                                <p>120,899</p>
                                <span><i class="icon-dot" style="color: tomato;"></i>点位分布</span>
                            </div>
                            <div class="item">
                                <p>248</p>
                                <span><i class="icon-dot" style="color: greenyellow;"></i>本月新增</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 第三列 -->
        <div class="column">
            <!-- 3.1订单量 -->
            <div class="panel order">
                <div class="inner">
                    <div class="head">
                        <a class="active" href="javascript:;">365天</a>
                        <span></span>
                        <a href="javascript:;">90天</a>
                        <span></span>
                        <a href="javascript:;">30天</a>
                        <span></span>
                        <a href="javascript:;">24小时</a>
                    </div>
                    <div class="data">
                        <div class="item">
                            <p>20,301</p>
                            <span><i class="icon-dot" style="color: tomato;"></i>订单量</span>
                        </div>
                        <div class="item">
                            <p>9034</p>
                            <span><i class="icon-dot" style="color: tomato;"></i>销售额(万元)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3.2销售额统计 -->
            <div class="panel sales">
                <div class="inner">
                    <h3>
                        <span>销售额</span>
                        <a href="javascript:;">年</a>
                        <a class="active" href="javascript:;">季</a>
                        <a href="javascript:;">月</a>
                        <a href="javascript:;">周</a>
                    </h3>
                    <div class="echarts">
                        <div class="line"></div>
                    </div>
                </div>
            </div>

            <!-- 3.3渠道分布/一季度销售进度 -->
            <div class="clearfix">
                <!-- 左边 渠道分布 -->
                <div class="panel fl hannel">
                    <div class="inner">
                        <h3>渠道分布</h3>
                        <div class="data">
                            <div class="item">
                                <p>
                                    <b>39</b>
                                    <small>%</small>
                                </p>
                                <span><i class="icon-plane"></i>机场</span>
                            </div>
                            <div class="item">
                                <p><b>28</b><small>%</small></p>
                                <span><i class="icon-bag"></i>商城</span>
                            </div>
                            <div class="item">
                                <p><b>20</b><small>%</small></p>
                                <span><i class="icon-train"></i>地铁</span>
                            </div>
                            <div class="item">
                                <p><b>13</b><small>%</small></p>
                                <span><i class="icon-bus"></i>火车站</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 右边 一季度销售进度 -->
                <div class="panel fr quarter">
                    <div class="inner">
                        <h3>一季度销售进度</h3>
                        <div class="echarts">
                            <div class="loop"></div>
                            <div class="show"><b>75</b><small>%</small></div>
                        </div>
                        <div class="data">
                            <div class="item">
                                <p>1,321</p>
                                <span><i class="icon-dot" style="color: greenyellow;"></i>销售额</span>
                            </div>
                            <div class="item">
                                <p>150%</p>
                                <span><i class="icon-dot" style="color: tomato;"></i>同比增长</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3.4全国热榜 -->
            <div class="panel hot">
                <div class="inner">
                    <!-- 左边全国热榜 -->
                    <div class="all fl">
                        <h3>全国热榜</h3>
                        <div class="data">
                            <p><i class="icon-cup1" style="color: sandybrown;"></i><span>可爱多</span></p>
                            <p><i class="icon-cup2" style="color: seashell;"></i><span>哇哈哈</span></p>
                            <p><i class="icon-cup3" style="color: sienna;"></i><span>小洋人</span></p>
                        </div>
                    </div>
                    <!-- 右边各省热销 -->
                    <div class="province fr">
                        <h3 class="clearfix"><b class="fl">各省热销</b><i class="fr">//近30日//</i></h3>
                        <div class="data">
                            <ul class="fl">
                                <li class="active"><span>北京</span><b>25,179</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>河北</span><b>25,252</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>上海</span><b>34,456</b><i class="icon-down" style="color: rgb(160, 255, 71);"></i></li>
                                <li><span>江苏</span><b>23,232</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>曹县</span><b>56,232</b><i class="icon-down" style="color: rgb(160, 255, 71);"></i></li>
                            </ul>

                            <ul class="fr">
                                <li><span>好多鱼</span><b>2,170</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>可爱的</span><b>9,132</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>哇哈哈</span><b>8,341</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>喜之郎</span><b>5,234</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>七喜</span><b>7,234</b><i class="icon-up" style="color: tomato;"></i></li>
                                <li><span>小洋人</span><b>3,343</b><i class="icon-up" style="color: tomato;"></i></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>